<template>
  <div class="evidence">
    <!-- <h2>上传拼争</h2> -->
    <div class="evidence-top">
      <van-uploader
        :after-read="afterRead"
        upload-icon="plus"
        v-model="fileList"
      >
      </van-uploader>
    </div>
    <div class="tips">注：财务核对充值金额和上传金额无误之后方可生效。</div>
    <div
      class="pay-us"
      @click="goEvidence"
      :class="isWatchPay ? 'active-pay' : ''"
    >
      查看货款余额
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getAddPayment, getUpLoad, getApplyAgentLevel } from '@/api/pays'
export default {
  name: 'evidence',
  data() {
    return {
      fileList: [],
      isWatchPay: false,
      datas: '',
      price: '',
      fileListId: [],
    }
  },
  created() {
    if (this.$route.query.datas) {
      this.datas = this.$route.query.datas
      console.log(this.datas)
    } else if (this.$route.query.price) {
      this.price = this.$route.query.price
    }
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.isWatchPay = true
      console.log(file)
      console.log(file.content)

      file.file_type = 'base64'
      let bbb = JSON.parse(JSON.stringify(file).replace(/content/g, 'file'))
      console.log(bbb)
      getUpLoad(bbb).then((res) => {
        console.log(res)
        this.fileListId.push(res.data.id)
      })
    },
    goEvidence() {
      const uploadIds = []
      if (this.fileList.length == 0) {
        Toast('必须要上传凭证')
      } else {
        console.log(this.fileList)
        console.log(this.fileListId)
        if (this.price) {
          console.log('钱', this.price)
          this.getAddPayments()
        } else {
          console.log('对象')
          this.getApplyAgentLevels()
        }

        return
        this.$router.push('/agency')
      }
    },
    async getAddPayments() {
      const datas = {
        fee: this.$route.query.price,
        upload_ids: [...this.fileListId],
      }
      const res = await getAddPayment(datas)
      console.log(res)
    },
    // 注册付钱
    async getApplyAgentLevels() {
      const data = this.$route.query.datas;
      data.upload_ids = [...this.fileListId];
      console.log(data);
      const res = await getApplyAgentLevel(data);
      console.log(res);
    },
  },
}
</script>

<style lang="scss" scoped>
.evidence {
  font-size: 14px;
}
.evidence-top {
  margin: 20px 12px;
}
.tips {
  margin: 0 12px;
  font-weight: 400;
  color: #afabb7;
}
div.active-pay {
  background: linear-gradient(135deg, #2389ff 0%, #1852f9 100%);
}
.pay-us {
  //width: 351px;
  position: absolute;
  left: 12px;
  bottom: 44px;
  width: 351px;
  height: 40px;
  color: #fff;
  //background: linear-gradient(135deg, #2389ff 0%, #1852f9 100%);

  background: #afabb7;
  box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
}
::v-deep .van-uploader__upload {
  width: 114px;
  height: 114px;
  margin: 0;
}
::v-deep {
  .van-uploader__preview {
    width: 114px;
    height: 114px;
    margin-right: 2px;
  }
  .van-image {
    width: 100%;
    height: 100%;
  }
}
</style>